<template>
  <view>
    <!-- 触发选择器的按钮 -->
    <!-- 		// <button @click="showPickerFn()">选择地区</button> -->

    <!-- 地区选择器 -->
    <u-picker
      ref="uPicker"
      :show="showPicker"
      :columns="columns"
      @confirm="handleConfirm"
      @change="handleColumnChange"
      :default-index="defaultIndexes"
      @cancel="cancel"
    />
  </view>
</template>

<script>
export default {
  props: {
    areaTree: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      initfalg: false,
      showPicker: false, // 控制选择器显示
      columns: [[], [], []], // 省、市、区三列
      defaultIndexes: [0, 0, 0], // 默认选中索引
    };
  },
  mounted() {
    // this.initColumns(); // 初始化省份列
  },
  methods: {
    showPickerFn(targetCode) {
      if (!this.initfalg) {
        this.initfalg = true;
        this.initColumns(); // 初始化省份列
      }

      this.showPicker = true;
    },
    // 初始化省份列
    initColumns() {
      this.columns[0] = this.areaTree.map((province) => province.name);
      // 初始化城市列（默认选中第一个省份的第一个城市）
      if (this.columns[0].length > 0) {
        this.updateCities(0);
      }
    },
    // 更新城市列
    updateCities(provinceIndex) {
      const selectedProvince = this.areaTree[provinceIndex];

      this.columns[1] =
        selectedProvince.children?.map((city) => city.name) || [];
      // 重置城市列的索引，并更新区县列
      this.defaultIndexes[1] = 0;
      this.updateDistricts(provinceIndex, 0);
    },
    // 更新区县列
    updateDistricts(provinceIndex, cityIndex) {
      const selectedProvince = this.areaTree[provinceIndex];
      const selectedCity = selectedProvince.children[cityIndex];
      this.columns[2] =
        selectedCity.children?.map((district) => district.name) || [];
      this.defaultIndexes[2] = 0;
      this.$refs.uPicker.setColumns(this.columns);
    },
    // 列变化时触发（联动更新后续列）
    handleColumnChange(e) {
      const { columnIndex, index } = e;
      if (columnIndex === 0) {
        // 省份变化，更新城市和区县
        this.updateCities(index);
      } else if (columnIndex === 1) {
        // 城市变化，更新区县
        this.updateDistricts(e.indexs[0], index);
      }
    },
    // 确认选择
    handleConfirm(e) {
      this.showPicker = false;
      this.$nextTick(() => {
        const [provinceIndex, cityIndex, districtIndex] = e.indexs;
        const provinceName = this.columns[0][provinceIndex];
        const cityName = this.columns[1][cityIndex];
        const districtName = this.columns[2][districtIndex];

        this.$emit(
          "input",
          this.getFullCode(provinceIndex, cityIndex, districtIndex)
        );
        this.$emit("change", {
          province: provinceName,
          city: cityName,
          district: districtName,
          code: this.getFullCode(provinceIndex, cityIndex, districtIndex),
        });
      });
    },
    cancel() {
      this.showPicker = false;
    },
    // 根据索引获取完整的地区编码（如 140105）
    getFullCode(provinceIndex, cityIndex, districtIndex) {
      const province = this.areaTree[provinceIndex];
      const city = province.children[cityIndex];
      const district = city.children[districtIndex];
      return district.id;
    },
  },
};
</script>
